(function(){
	var api = 'http://h6.duchengjiu.top/shop/';
	//调用封装的方法得到URL里面的goods_id的值
	var goodsId = getUrlValue('goods_id');
	var product = document.getElementById('product');
	var xiangxi = document.getElementById('xiangxi');
	var little = document.getElementById('little');
	$.get(api + 'api_goods.php', {'goods_id':goodsId}, function(result){
		var obj = result.data[0];
		//console.log(obj);
		//ES6的模板字符串
		product.innerHTML = `
		<img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/>
		<img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/>
		<img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/>
		<img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/>
		<img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/>
		`;
		xiangxi.innerHTML = `
			<a href='javascript:;'><p class='nam'>${obj.goods_name}</p></a>
			<a href='javascript:;'><p class='good'> ${obj.goods_desc}</p></a>
			<p class='money'>价格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>￥${obj.price}</span> </p>
		`;
		little.innerHTML = `
			<li><img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/></li>
			<li><img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/></li>
			<li><img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/></li>
			<li><img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/></li>
			<li><img src="img/loading.gif" lazyloadsrc="${obj.goods_thumb}"/></li>
			<span class='l' id ='l'></span><span class='r' id='r'></span>
			`;
			
			//<a href="javascript:;" class="add-cart" id="add-cart">加入购物车</a>
			//<a href="javascript:;" class="shop-cart" id="shop-cart">查看购物车 </a>
		
		//轮播
		var aImg = product.getElementsByTagName('img');
		var l = document.getElementById('l');
		var r = document.getElementById('r');
		var aLi = little.getElementsByTagName('li');
		aLi[0].className='border';
		aImg[0].style.opacity='1';
		var imgLength = aImg.length;
		var count = 0;
		var timer = setInterval(rightBtn, 2000)
		//鼠标移入
		product.onmouseover = function(){
			clearInterval(timer);
		};
		little.onmouseover = function(){
			clearInterval(timer);
		};
		//鼠标移出
		product.onmouseout = function(){
			timer = setInterval(rightBtn, 2000)
		};
		little.onmouseout = function(){
			timer = setInterval(rightBtn, 2000)
		};
		
		function rightBtn(){
		//节流
		if(aImg[count].lock){return};

		//当前的li淡出
		animate(aImg[count], {'opacity': 0}, 1000);

		//下一个li淡入
		count++;//  
		if(count > imgLength -1){
			count = 0;
		}
		animate(aImg[count], {'opacity': 1}, 1000);
		//调用数字
		num();
	};
	r.onclick = rightBtn;
	l.onclick = function(){
			//节流
			if(aImg[count].lock){return};
			//当前的li淡出
			animate(aImg[count], {'opacity': 0}, 500);
	
			//上一个li淡入
			count--;//  
			console.log(count); 
			if(count < 0){
				count = aImg.length-1;
			}
			animate(aImg[count], {'opacity': 1}, 500);
			//调用数字
			num();
		};
		//小轮播图 批量监听
		for(var i = 0; i < aLi.length; i++){
			aLi[i].index = i; //强制添加一个属性
			aLi[i].onclick = function(){
				//当前的图片淡出
				animate(aImg[count], {'opacity': 0}, 500);
				
				//被点击的淡入
				count = this.index;
	
				animate(aImg[count], {'opacity': 1}, 500);
				//console.log(count, a)
				num();
			};
		}
		//数字跟随封装
		function num(){
			//数字跟随  排它法
			for(var i = 0; i < aLi.length; i++){
				//把所有全变为默认
				aLi[i].className = '';
			};
			
	
			//桥接
			var n = count;
			if(n == aImg.length){
				n = 0;
			};
			aLi[count].style.opacity = 0.3;
			aLi[count].className = 'border';
			animate(aLi[count], {'opacity': 1}, 500)
		};
	
		$('[lazyloadsrc]').YdxLazyLoad();
	});
	var a = parseInt(Math.random()*10+1);
	var right = document.getElementById('right');
	$.get(api + 'api_goods.php',{'page':a,'pagesize':5},function(data){
		var obj = data.data;
		for(var i = 0;i<obj.length;i++){
			right.innerHTML +=`
			<div class="tuijian">
				<a href='xiangqing.html?goods_id=${obj[i].goods_id}'><img src="img/loading.gif" lazyloadsrc="${obj[i].goods_thumb}"/></a>
				<a href='xiangqing.html?goods_id=${obj[i].goods_id}'><p class='tle'>${obj[i].goods_name}</p></a>
				<p class='pinpai'>${obj[i].goods_desc}</p>
				<p class='money'>￥${obj[i].price}</p>
			</div>

			`;
			$('[lazyloadsrc]').YdxLazyLoad();
		};
	});
	var oMinus = document.getElementById('minus');
	var oAdd = document.getElementById('add');
	var oNum = document.getElementById('num');
	var nowNum = parseInt(oNum.value);
	oNum.onblur= function(){
		nowNum = parseInt(oNum.value);
		if(nowNum<=1){
			//console.log(1);
			oNum.value=1;
		}else if(nowNum>=100){
			//console.log(2);
			oNum.value=100;
		};
	};
	oMinus.onclick = function(){
		nowNum--;
		if(nowNum<=1){
			nowNum=1;
		};
		oNum.value=nowNum;
	};
	oAdd.onclick = function(){
		nowNum++;
		if(nowNum>=100){
			nowNum=100;
		};
		oNum.value=nowNum;
	};
	
	var addCart = document.getElementById('add-cart');
	var shopCart = document.getElementById('shop-cart');
	//console.log(addCart);
	//加入购物车
	addCart.onclick = function(){
		var token = localStorage.getItem('token');
		if(token){
			$.post(api + 'api_cart.php?token='+token, {'goods_id':goodsId, 'number':nowNum}, function(result){
				if(result.code == 0){
					alert(result.message);
				}else if(result.code == 2){
					alert('此商品已添加购物车了，请查看购物车');
				}
			});
		}else{
			//没有登录的情况下，先跳转到登录页面，一旦那边登录成功后直接跳转到当前goods_id页面
			alert('您还未登录，点击确定跳转到登录页面');
			location.href = 'denglu-2.html?goods_id='+ goodsId;
		};
	};
	
	//查看购物车
	shopCart.onclick = function(){
		var token = localStorage.getItem('token');
		if(token){
			location.href = 'shop.html';
		}else{
			if(confirm('您还未登录，点击确定跳转到登录页面')){
				//没有登录的情况下，先跳转到登录页面，一旦那边登录成功后直接跳转到当前goods_id页面
				location.href = 'denglu-2.html?goods_id='+ goodsId;
			}
			
		}
	};
})();




//console.log(window.location)
//这个方法用来干 什么的？
function getUrlValue(name){//?goods_id=257557&age=haha
		var str = location.search.substr(1);//goods_id=257557
		var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
		var result = str.match(reg);
		//console.log(result);
		if(result === null) return null;
		return result[2];
};